/**
 * @Date 2023-02-24 13:46:57
 * @Remark
 */

// react
import React, { useEffect } from "react";
// lib

import { Modal, Form,  Descriptions } from "antd";
// components & widget
// style
// config
import { MODULE_NAME } from "./config";
import { MODAL_STYLE } from "project/config";

// script & methods & public
// store
import { observer } from "mobx-react";
import { state } from "./state";
import dayjs from "dayjs";
// controller
// import { addMenu, updateMenu } from "./controller";
// interface
// 其它
function EditModal() {
  const [form] = Form.useForm();
  const show = state.editModalShow;
  const title = `${MODULE_NAME}`;

  const handleCancel = () => {
    state.editModal = false;
  };
  // 下拉选择搜索防抖
  useEffect(() => {
    if (show) {
      form.resetFields();
    }
    if (state.editInfo) {
      const info = state.editInfo;
      form.setFieldsValue({
        ...info,
        publishDate:dayjs(info.publishDate,'YYYY-MM-DD')
      });
    }
    return () => {
      //
    };
  }, [form, show]);


  const handleOk = async () => {
    state.editModal = false;
  };

  return (
    <Modal
      title={title}
      open={show}
      onCancel={handleCancel}
      onOk={handleOk}
      width={MODAL_STYLE.COL2}
      destroyOnClose
      maskClosable
      forceRender
      okButtonProps={{
        loading: state.editModalLoading,
      }}
    >
           <Descriptions className="mt-30" bordered layout="vertical">
        <Descriptions.Item label="图书编号">{state.editInfo?.bookId}</Descriptions.Item>
        <Descriptions.Item label="书名">{state.editInfo?.title}</Descriptions.Item>
        <Descriptions.Item label="作者">
          {state.editInfo?.author}
          </Descriptions.Item>
        <Descriptions.Item label="出版社">{state.editInfo?.publisher}</Descriptions.Item>
        <Descriptions.Item label="出版时间">{state.editInfo?.publishDate}</Descriptions.Item>
        <Descriptions.Item label="ISBN">{state.editInfo?.isbn}</Descriptions.Item>
        <Descriptions.Item label="所属分类">{state.categoryList.find(item => item.categoryId === state.editInfo?.categoryId)?.categoryName }</Descriptions.Item>
        <Descriptions.Item label="定价">{state.editInfo?.price}</Descriptions.Item>
        <Descriptions.Item label=" ">{" "}</Descriptions.Item>
        <Descriptions.Item label="简介"><div dangerouslySetInnerHTML={{__html: state.editInfo?.description || ""}}></div></Descriptions.Item>
        </Descriptions>

    </Modal>
  );
}

export default observer(EditModal);
